<template>
  <div>
    <!-- 每日行情 -->
    <div class="mrhq-class">
      <div class="mrhq-title">
        螺丝椒
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>
      <div class="table-header df aic">
        <div>品名</div>
        <div>市场</div>
        <div>日期</div>
        <div>价格</div>
        <div>单位</div>
      </div>
      <swiper
        :options="swiperOption"
        ref="mySwiper"
        style="height: 530px;width: 510px;"
      >
        <swiper-slide
          class="zhnc-table-th mb8 df aic"
          v-for="item in 20"
          :key="item"
          style="height: 30px;"
        >
          <div class="fs14 textOver">螺丝椒</div>
          <div class="fs14 textOver">友联农贸市场</div>
          <div class="fs14 textOver">2025-01-01</div>
          <div class="fs14 textOver">3.2</div>
          <div class="fs14 textOver">
            元/公斤
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        loop: true,
        freeMode: true,
        slidesPerView: "auto",
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
          clickable: true,
        },
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.cFFF44A {
  color: #fff44a;
}
.mrhq-class {
  width: 551px;
  height: 637px;
  overflow: hidden;
  background-image: url(".././../../../assets/government/PriceQuotes/1.png");
  .mrhq-title {
    width: 115px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
}
.table-header {
  background: #0072ff;
  text-align: center;
  margin-left: 21px;
  margin-top: 60px;
  margin-bottom: 5px;
  width: 510px;
  height: 38px;
  div:nth-child(1) {
    width: 90px;
  }
  div:nth-child(2) {
    margin-left: 5px;

    width: 150px;
  }
  div:nth-child(3) {
    margin-left: 5px;

    width: 150px;
  }
  div:nth-child(4) {
    margin-left: 5px;

    width: 120px;
  }
  div:nth-child(5) {
    margin-left: 5px;

    width: 130px;
  }
}
.zhnc-table-th {
  &:nth-child(odd) {
    background: linear-gradient(
      180deg,
      #0072ff 0%,
      #2285ff5b 50%,
      #0072ff 100%
    );
  }
  width: 510px;
  text-align: center;
  padding: 2px 0;
  div:nth-child(1) {
    width: 90px;
  }
  div:nth-child(2) {
    margin-left: 5px;

    width: 150px;
  }
  div:nth-child(3) {
    margin-left: 5px;

    width: 150px;
  }
  div:nth-child(4) {
    margin-left: 5px;

    width: 120px;
  }
  div:nth-child(5) {
    margin-left: 5px;

    width: 130px;
  }
}
</style>
